<template>
	<view class="center">
		<hea-ders title="拜访计划查看">
			<image slot='left' src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
			<!-- 	<image slot='Lright' src="@/static/images/路径 731.png" mode="widthFix"></image>
				<image slot='Rright' src="@/static/images/tb_icon.png" mode="widthFix"></image> -->
		</hea-ders>
<!-- 	<view class="tit"></view>
		<view class="title">
			<image src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
			<text>拜访计划查看</text>
			<view class="ima">
				<image src="../../../static/images/路径 731.png" mode="widthFix"></image>
				<image src="../../../static/images/tb_icon.png" mode="widthFix"></image>
			</view>
		</view> -->
		<view class="name">
			<text>客户名称<text style="color: red;">*</text></text>
			<text style="color: rgba(189, 189, 189, 1);">123</text>
		</view>
		<view class="name">
			<text>客户级别<text style="color: red;">*</text></text>
			<text style="color: rgba(189, 189, 189, 1);">零售客户</text>
		</view>
		<view class="name">
			<text>客户地址<text style="color: red;">*</text></text>
			<input type="text" v-model="coneter" value="" placeholder-style="text-align:right;" placeholder="请输入地址" />
		</view>
		<view class="name">
			<text>到店时间<text style="color: red;">*</text></text>
			<view class="uni-list-cell-db">
    <KXDateTime 
		:data='datez' 
		@rundata='kxdatetime' 
		default='start'>
		</KXDateTime>
		</view>
		</view>
		<view class="name">
			<text>离店时间<text style="color: red;">*</text></text>
			<view class="uni-list-cell-db">
			<KXDateTime
			:data='dates'  
			@rundata='kxdatetimes' 
			default='start'>
			</KXDateTime>
			</view>
		</view>
		<view class="name">
			<text>下次拜访时间</text>
			<view class="uni-list-cell-db">
				<picker 
				mode="date" 
				:value="date" 
				@change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
			</view>
		</view>
		<view class="names">
			<text>拜访时段<text style="color: red;">*</text></text>
			<view class="uni-textarea">
				<textarea placeholder-style="text-align:right;" placeholder="请输入拜访计划内容" />
				</view>
		</view>
	</view>
</template>

<script>
	import KXDateTime from "@/components/kx-datetime/kx-datetime.vue"
	import heaDers from "@/pages/header/header.vue"
	export default {
		 components: {
			 KXDateTime,
					heaDers
		 },
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				datez:currentDate,
				dates:currentDate,
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
			
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
		kxdatetime(e){
			this.datez=e
	},
	kxdatetimes(e){
			this.dates=e
	},
		}
	}
</script>

<style lang="scss" scoped>
.center {
	width: 100vw;
	height: 100vh;
	box-sizing: border-box;
	.tit {
		width: 100%;
		height: 80rpx;
		box-sizing: border-box;
	}
	
	.title {
		width: 100%;
		height: 88rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: rgba(36, 153, 246, 1);
		display: flex;
		justify-content: space-between;
		align-items: center;
	margin-bottom: 20rpx;
		image {
	
			width: 22rpx;
		}
	
		text {
			font-size: 36rpx;
			color: #fff;
			font-weight: 400;
			font-family: PingFang SC;
		}
	
		.ima {
			image {
				width: 40rpx;
				margin-left: 5rpx;
			}
		}
	}
	.name {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 88rpx;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-bottom: 1rpx solid #e0e0e0;
	
		text {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 40rpx;
			opacity: 1
		}
	
		image {
			width: 20rpx;
		}
	
		.uni-list-cell-db {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 40rpx;
		color: rgba(189, 189, 189, 1);
			opacity: 1;
		}
	}
	.names {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-bottom: 1rpx solid #e0e0e0;
	
	text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 40rpx;
		opacity: 1
	}
	.uni-textarea {
		width: 80%;
		textarea{
			padding-right: 30rpx;
			box-sizing: border-box;
		}
	}	
	}
}
</style>
